<template>
  <v-app>
  <v-navigation-drawer app v-if="false" :clipped="$vuetify.breakpoint.mdAndUp">   
  </v-navigation-drawer>
  <v-toolbar app>
      <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
    <v-toolbar-title>电子通讯录</v-toolbar-title>
    <v-spacer></v-spacer>
    <v-toolbar-items class="hidden-sm-and-down">
      <v-btn flat to="/departments" v-if="loggedIn">部门列表</v-btn>
      <v-btn flat to="/" v-if="loggedIn">人员列表</v-btn>
      <v-btn v-if="loggedIn">添加部门</v-btn>
      <v-btn v-if="loggedIn">添加员工</v-btn>
      <v-btn flat v-if="loggedIn" @click="$store.dispatch('logout')">退出</v-btn>
      <!-- <v-btn flat to="/login">登录</v-btn> -->
      <!-- <v-btn flat>Link Three</v-btn> -->
    </v-toolbar-items>
  </v-toolbar>
  <v-content>
    <v-container fluid>
      <router-view></router-view>
    </v-container>
  </v-content>
  <v-footer app></v-footer>
</v-app>

</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'App',
  created(){
    this.$store.commit('initAuth')
  },
  data(){
    return {
      drawer: null
    }
  },
  watch: {
    loggedIn(nv){
      if(nv){
        this.$router.push("/")
      }
      else{
        this.$router.push("login")
      }
    }
  },
  computed: {
    any(){return true},
    ...mapGetters([
      'loggedIn',
      'user'
    ])
  }
}
</script>


